<template>
  <div class="alarmRate">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="区县名称">
          <i-input v-model="formDataSearch.countyName" placeholder="请输入区县名称" clearable/>
        </FormItem>
        <FormItem label="汇总日期">
          <DatePicker type="daterange" v-model="formDataSearch.datarange" format="yyyy-MM-dd" placement="bottom-end" placeholder="请选择汇总日期"/>
        </FormItem>
        <FormItem >
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card  dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <Button type="primary" @click="exportData" style="position: relative;top: -8px;">导出</Button>
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>
  </div>
</template>
<script setup>


import {inject, onMounted, reactive, ref, resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
import {systemDictList} from "../../../util/commonInterfaces";
const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

// 搜索
const formDataSearch = reactive({
  datarange:[$common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),$common.timeFormatting(new Date(), 'yyyy-MM-dd')],
  alarmStartDate: $common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
  alarmEndDate: `${$common.timeFormatting(new Date(), 'yyyy-MM-dd')}`,
})

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.supervisoryCollectAlarmCountyPageList,//请求地址
  method: 'post',//请求方式
  where: {
    alarmStartDate: $common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
    alarmEndDate: `${$common.timeFormatting(new Date(), 'yyyy-MM-dd')}`,
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '区县名称', minWidth: 120, key: 'countyName',tooltip:true,},

    {title: '总车辆数', minWidth: 100, key: 'vehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.vehicleCount}辆`)
      }},
    {title: '报警车辆数', minWidth: 100, key: 'alarmVehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmVehicleCount}辆`)
      }},
    {title: '报警总数', minWidth: 100, key: 'alarmAllCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmAllCount}次`)
      }},
    {title: '超速报警数', minWidth: 100, key: 'alarmSpeedCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmSpeedCount}次`)
      }},
    {title: '超速报警车辆数', minWidth: 130, key: 'alarmSpeedVehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmSpeedVehicleCount}辆`)
      }},
    {title: '疲劳报警数', minWidth: 100, key: 'alarmTiredCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmTiredCount}次`)
      }},
    {title: '疲劳报警车辆数', minWidth: 130, key: 'alarmTiredVehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmTiredVehicleCount}辆`)
      }},
    {title: 'ADAS报警数', minWidth: 130, key: 'alarmAdasCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmAdasCount}次`)
      }},
    {title: 'ADAS报警车辆数', minWidth: 140, key: 'alarmAdasVehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmAdasVehicleCount}辆`)
      }},
    {title: 'DSM报警数', minWidth: 100, key: 'alarmDsmCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmDsmCount}次`)
      }},
    {title: 'DSM报警车辆数', minWidth: 130, key: 'alarmDsmVehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmDsmVehicleCount}辆`)
      }},
    {title: '其他报警数', minWidth: 100, key: 'alarmOtherCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmOtherCount}次`)
      }},
    {title: '其他报警车辆数', minWidth: 130, key: 'alarmOtherVehicleCount',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmOtherVehicleCount}辆`)
      }},
    {title: '车辆报警率', minWidth: 100, key: 'alarmVehicleRate',tooltip:true,render: (h, params) => {
        return h('span', {}, `${params.row.alarmVehicleRate}%`)
      }},
    {title: '汇总日期', minWidth: 120, key: 'alarmDate',tooltip:true,},
  ],
  pagingParameters:{// 分页参数
    page:'pageNo',
    limit:'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor:[
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色

  personTypeList:[],//从业类型
  transportTypeList:[],//经营类型
  selectData:{},//选中数据
  formOperation:false,//弹框状态
  formTitle:'',//弹框标题
  formData:{
    username:'gtjt_llb',
    password:'sersllb123',
  },//表单数据
});

//搜索方法
const searchSubmit = ()=>{
  let data = Object.assign({},formDataSearch);
  data.alarmStartDate = $common.timeFormatting(new Date(data.datarange[0]))
  data.alarmEndDate = $common.timeFormatting(new Date(data.datarange[1]))
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

/**
 * 导出数据
 */
const exportData = () => {
  let msg = $ViewUIPlus.Message.loading({
    content: '导出中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryCollectAlarmCountyExport,formDataSearch).then((res) => {
    msg()
    if (!!res) {
      window.open(`${apiUrl.imgUrl}${res.data.data}`)
    }
  }).catch((err) => {
    msg()
  })
}

onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
  state.transportTypeList = await systemDictList({type: 'transport_type'})
})
</script>

<style lang="less">
  .alarmRate{
    padding: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .ivu-card-body {
      height: calc(100% - 41px);
    }
  }
</style>
